<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('文章添加')" />
	<link rel="stylesheet" th:href="@{/plugins/UEditor/xiumi-ue-v5.css}"/>
</head>
<body>
	<section class="content">
		<div class="box box-default color-palette-box">
			<div class="box-header with-border">
				<h3 class="box-title"></h3>
			</div>
			<form class="form-horizontal" id="newsArticleForm">
	           <div class="box-body">
	               <div class="form-group">
	                   <label for="name" class="col-sm-2 control-label">标题名称 :</label>
	                   <div class="col-sm-10">
	                       <input type="text" class="form-control" name="title" id="title" required placeholder="请输入标题名称">
	                   </div>
	               </div>
	               <div class="form-group">
	                   <label for="description" class="col-sm-2 control-label">文章分类 :</label>
	                   <div class="col-sm-10">
                   			<select id="newsCategoryId" name="newsCategoryId" class="form-control select2" style="width:90%;" required>
								<option value="" selected="selected">--请选择类目（必选）--</option>
								<option th:each="category:${categoryList}" th:value="${category.newsCategoryId}" th:text="${category.categoryName}"></option>
							</select>
	                   </div>
	               </div>
	               <div class="form-group">
	                   <label for="description" class="col-sm-2 control-label">文章摘要 :</label>
	                   <div class="col-sm-10">
                			<textarea class="form-control" name="brief" id="brief"  rows="3" placeholder="请输入文章摘要" required></textarea>
	                   </div>
	               </div>
	               <div class="form-group">
	                   <label for="description" class="col-sm-2 control-label">列表图片 :</label>
	                   <div class="col-sm-10">
	                       	<input type="hidden" id="bannerPic" name="bannerPic">
							<div class="file-loading">
					            <input id="bannerImg" name="file" type="file" multiple>
					        </div>
	                   </div>
	               </div>
	               <div class="form-group">
	                   <label for="description" class="col-sm-2 control-label">文章内容 :</label>
	                   <div class="col-sm-10">
							<script id="editor" type="text/plain" style="height: 300px;"></script>
							<textarea id="content" name="content" style="display: none;"></textarea>
	                   </div>
	               </div>
	               <div class="form-group">
	                   <label for="description" class="col-sm-2 control-label">浏览量 :</label>
	                   <div class="col-sm-10">
	                       <input type="text" class="form-control" name="viewsNum" id="viewsNum" placeholder="请输入浏览量" required>
	                   </div>
	               </div>
	               <div class="form-group">
	                   <label for="description" class="col-sm-2 control-label">显示状态 :</label>
	                   <div class="col-sm-10">
							<label class="radio-inline pr-5"><input type="radio" name="status" value="1" required> 显示</label>
							<label class="radio-inline pr-5"><input type="radio" name="status" value="0" checked="checked" required> 隐藏</label>
	                   </div>
	               </div>
	               <div class="form-group">
	                   <label for="description" class="col-sm-2 control-label">是否置顶 :</label>
	                   <div class="col-sm-10">
							<label class="radio-inline pr-5"><input type="radio" name="setTop" value="1" required> 置顶</label>
							<label class="radio-inline pr-5"><input type="radio" name="setTop" value="0" checked="checked" required> 不置顶</label>
	                   </div>
	               </div>
	               <div class="form-group">
						<label class="col-sm-3 control-label">&nbsp;</label>
						<div class="col-sm-8 col-sm-offset-5">
							<button type="button" class="btn btn-primary" onclick="submitHandler()"><i class="fa fa-save"></i>保存</button>
							<button type="button" class="btn btn-default" onclick="closeTab()"><i class="fa fa-close"></i>取消</button>
						</div>
				   </div>
	           </div>
	       </form>
		</div>
	</section>
	<th:block th:include="include :: footer" />
	<script th:src="@{/plugins/UEditor/ueditor.config.js}"></script>
	<script th:src="@{/plugins/UEditor/ueditor.all.js}"></script>
	<script th:src="@{/plugins/UEditor/lang/zh-cn/zh-cn.js}"></script>
	<script th:src="@{/plugins/UEditor/xiumi-ue-dialog-v5.js}"></script>
	<script type="text/javascript">
		//单图上传
		$("#bannerImg").fileinput({
		    uploadUrl: '/sysfile/upload',
		    maxFileCount: 1,
		    autoReplace: true,
		    initialPreviewAsData: true,
		    validateInitialCount: true,
		    previewSettings: {
		        image: { width:"auto", height:"100px" }
		    },
		    initialPreview: [],
		    layoutTemplates:{
		        actionUpload:'',//去除上传预览缩略图中的上传图片
		        actionDownload:'' ,//去除上传预览缩略图中的下载图标
		        actionDelete:'', //去除上传预览的缩略图中的删除图标
		    },
		}).on('fileuploaded', function (event, data, previewId, index) {
			var rsp = data.response;
			console.log("return fileUrl：" + rsp.fileUrl);
			console.log("reutrn fileName：" + rsp.fileName);
		    $('#bannerPic').val(rsp.fileUrl);
		}).on('filecleared', function(event) {
			$('#bannerPic').val('');
		})
		//富文本编辑器
		var ue = UE.getEditor('editor',{
			UEDITOR_HOME_URL: "/plugins/UEditor/",
	        serverUrl: "/plugins/UEditor/ueditor/exec",
	        catchRemoteImageEnable: true, // 开启远程图片抓取
	        toolbars: [
				[
					'fullscreen', 'source', 'preview', '|',
					'bold', 'italic', 'underline', 'strikethrough', 'forecolor', 'backcolor', '|', 'justifyleft',
					'justifycenter', 'justifyright', '|',
					'insertorderedlist', 'insertunorderedlist', 'blockquote', 'emotion', 'insertimage', 'insertvideo',
					'music', 'link', 'removeformat', '|',
					'rowspacingtop', 'rowspacingbottom', 'lineheight', 'indent', '|', 'paragraph', 'fontfamily', 'fontsize', '|',
					'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol',
					'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|', 'anchor',
					'print', 'previewh5',
				]
	        ],
            autoHeightEnabled: false, // 是否自动长高,默认true
            initialFrameWidth: '100%', // 初始化富文本编辑框宽度
            initialFrameHeight: 650, // 初始化富文本编辑框高度
            enableAutoSave: false, // 是否开启自动保存
            zIndex : 900, // 编辑器显示层级
		});
		// 获取文本内容
	    function getContent() {
	        return UE.getEditor('editor').getContent();
	    }
		// 提交请求
		function submitHandler() {
			$("#content").val(getContent());
			if($("#newsArticleForm").validate().form()){
                $.common.postAjax("/newsArticle/doAdd", $("#newsArticleForm").serialize(), function (data) {
                    if(data.code == 0){
                    	// 返回刷新列表页
                    	var topWindow = $(window.parent.document);
	    	            var currentId = $('.page-tabs-content', topWindow).find('.active').attr('data-panel');
	    	            var $contentWindow = $('.J_iframe[data-id="' + currentId + '"]', topWindow)[0].contentWindow;
    	        		closeItem();
    	        		$contentWindow.$.table.refreshTable();
    	        		$contentWindow.toastr.success(data.msg);
					} else {
						toastr.error(data.msg);
					}
                })
            }
		}
		// 关闭页签
		function closeTab() {
			closeItem();
		}
	</script>
</body>
</html>